<template>
  <el-dialog
    v-model="visibility"
    width="65%"
    :title="config.button.text.view"
    append-to-body
    draggable
    :close-on-click-modal="false">
    <el-divider content-position="left">采购链路-全局信息</el-divider>
    <el-descriptions
      :column="appStore.column"
      border>
      <el-descriptions-item
        label="订单编号"
        width="100px">
        {{ formData.purchaseOrderNumber }}
      </el-descriptions-item>
      <el-descriptions-item
        label="米厂名称"
        width="100px">
        {{ formData.baseRiceBarnSimpleName }}
      </el-descriptions-item>
      <el-descriptions-item
        label="采购总吨数"
        width="100px">
        {{ formData.purchaseSumTon }}
      </el-descriptions-item>
      <el-descriptions-item
        label="采购编号"
        width="100px">
        {{ formData.serialNumber }}
      </el-descriptions-item>
      <el-descriptions-item
        label="采购订单名称"
        width="100px">
        {{ formData.purchaseOrderName }}
      </el-descriptions-item>
      <el-descriptions-item
        label="资金仓库名称"
        width="100px">
        {{ formData.baseCapitalWarehouseName }}
      </el-descriptions-item>
      <el-descriptions-item
        label="附件"
        width="100px">
        <UploadFile
          ref="uploadRef"
          :show="false"
          :file-uuids="fileDataList" />
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">采购链路-节点间信息</el-divider>
    <el-descriptions
      :column="appStore.column"
      border>
      <el-descriptions-item
        label="基础提货单价"
        width="100px">
        {{ formData.basePickUnitPrice }}
      </el-descriptions-item>
      <el-descriptions-item
        label="采购单价"
        width="100px">
        {{ formData.nodeUnitPrice }}
      </el-descriptions-item>
      <el-descriptions-item
        label="日化率"
        width="100px">
        {{ formData.dailyChemicalRate }}<span v-if="formData.dailyChemicalRate">%</span>
      </el-descriptions-item>
      <el-descriptions-item
        label="仓储费"
        width="100px">
        {{ formData.storageChargeFee }}
      </el-descriptions-item>
      <el-descriptions-item
        label="付款方式"
        width="100px"
        v-if="formData.capitalFirstPayWayEnum">
        {{ FirstPayWay.find(item => item.value ===
          formData.capitalFirstPayWayEnum).label }}
      </el-descriptions-item>
      <el-descriptions-item
        label="资方预付款率"
        width="100px">
        {{ formData.capitalFirstPayPercent }}<span v-if="formData.capitalFirstPayPercent">%</span>
      </el-descriptions-item>
      <el-descriptions-item
        label="我司预付款率"
        width="100px">
        {{ formData.companyFirstPayPercent }}<span v-if="formData.companyFirstPayPercent">%</span>
      </el-descriptions-item>
      <el-descriptions-item
        label="资方尾款率"
        width="100px">
        {{ formData.capitalEndPayPercent }}<span v-if="formData.capitalEndPayPercent">%</span>
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">提货链路-统计信息-吨数情况</el-divider>
    <el-descriptions
      :column="appStore.column"
      border>
      <el-descriptions-item
        label="总-发货吨数"
        width="100px">
        {{ formData.tonSendTonSum }}
      </el-descriptions-item>
      <el-descriptions-item
        label="总-到货吨数"
        width="100px">
        {{ formData.tonArrivalTonSum }}
      </el-descriptions-item>
      <el-descriptions-item
        label="总-完整吨数"
        width="100px">
        {{ formData.tonIntactTonSum }}
      </el-descriptions-item>
      <el-descriptions-item
        label="总-破损吨数"
        width="100px">
        {{ formData.tonWornTonSum }}
      </el-descriptions-item>
      <el-descriptions-item
        label="已提-总吨数"
        width="100px">
        {{ formData.tonArrivalTonSumByPick }}
      </el-descriptions-item>
      <el-descriptions-item
        label="已提-完整吨数"
        width="100px">
        {{ formData.tonIntactTonSumByPick }}
      </el-descriptions-item>
      <el-descriptions-item
        label="已提-破损吨数"
        width="100px">
        {{ formData.tonWornTonSumByPick }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">提货链路-统计信息-金额情况</el-divider>
    <el-descriptions
      :column="appStore.column"
      border>
      <el-descriptions-item
        label="已付-预付款金额"
        width="100px">
        {{ formData.pricePaidFirstPrice }}
      </el-descriptions-item>
      <el-descriptions-item
        label="已抵扣-预付款金额"
        width="100px">
        {{ formData.priceSumCompanyFirstPayPrice }}
      </el-descriptions-item>
      <el-descriptions-item
        label="总-提货应付款"
        width="100px">
        {{ formData.priceSumPickPayPrice }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">采购订单-基本信息</el-divider>
    <el-descriptions
      :column="appStore.column"
      border>
      <el-descriptions-item
        label="创建时间"
        width="100px">
        {{ formatDateTime(formData.createTime) }}
      </el-descriptions-item>
      <el-descriptions-item
        label="创建人"
        width="100px">
        {{ formData.createUserRealName }}
      </el-descriptions-item>
      <el-descriptions-item
        label="修改人"
        width="100px">
        {{ props.rowData.updateUserRealName }}
      </el-descriptions-item>
      <el-descriptions-item
        label="上次修改时间"
        width="100px">
        {{ formatDateTime(props.rowData.updateTime) }}
      </el-descriptions-item>
      <el-descriptions-item
        label="启用状态"
        width="100px">
        {{ formData.isEnable ? config.button.text.enable :
          config.button.text.stop }}
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <div>
        <el-button
          type="info"
          v-permission="validateButtonPermission(route, 2)"
          v-if="appStore.isPhone"
          @click="addTrain">
          添加车次
        </el-button>
        <el-button
          type="warning"
          v-permission="validateButtonPermission(route, 1)"
          v-if="appStore.isPhone"
          @click="editInfo">
          {{ config.button.text.edit }}
        </el-button>
        <el-button @click="visibility = false">{{ config.button.text.close }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import config from "@/common/element-plus/config";
import { useAppStore } from "@/stores/app"
import { formatDateTime } from "@/common/utils/date";
import ApiPurchaseOrder from "@/api/modules/purchase-order"
import { FirstPayWay } from "@/common/enum/purchase-order";
import { validateButtonPermission } from "@/common/utils/validate";
import { useRoute } from "vue-router"
import UploadFile from "@/components/UploadFile.vue"

// 附件回显
const fileDataList = ref([]);
const route = useRoute()
const appStore = useAppStore()

const visibility = ref(false)
const formData = ref({})

const props = defineProps(["rowData"])

watch(() => visibility.value, async (val) => {
  if (val) {
    const data = await ApiPurchaseOrder.queryInfoByPurchaseOrderNumber({
      purchaseOrderNumber: props.rowData.purchaseOrderNumber
    })
    formData.value = data.data
    fileDataList.value = []
    if (formData.value.fileDataJson && Array.isArray(JSON.parse(formData.value.fileDataJson))) {
      fileDataList.value = JSON.parse(formData.value.fileDataJson);
    }
  }
})

const emits = defineEmits(["editInfo", "addTrain"])
const editInfo = () => {
  visibility.value = false;
  emits("editInfo", props.rowData);
}

const addTrain = () => {
  visibility.value = false;
  emits("addTrain", props.rowData);
}

defineExpose({ visibility })
</script>

<style lang="scss" scoped>
:deep(.el-descriptions__label) {
  width: 142px;
}
</style>